<template>
  <div class="container">
    <div>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        @click="openDialog('新增')"
      >新增</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'children'}"
    >
      <el-table-column
        label="菜单名称"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.menuTitle }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="图标"
        width="50"
      >
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column
        label="权限标识"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.permission }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="路径"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.path }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.menuType === 'M'">目录</span>
          <span v-if="scope.row.menuType === 'C'">菜单</span>
          <span v-if="scope.row.menuType === 'F'">按钮</span>
          <span v-if="scope.row.menuType === 'A'">接口</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isBanned == "0" ? "正常" : "禁用" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="可见"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.isVisible == "0" ? "不可见" : "可见" }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="创建时间"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdOn) }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="openEtidDialog('修改', scope.row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click="deleteRow(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogSetting.title"
      :visible.sync="dialogSetting.dialogVisible"
      :width="dialogSetting.width"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :before-close="beforeCloseDialog"
    >

      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item
          v-if="dialogSetting.title === '新增'"
          label="上级菜单"
          prop="parentId"
        >
          <treeselect
            v-model="ruleForm.parentId"
            :options="deptOptions"
            :clearable="false"
            :close-on-select="true"
            placeholder="请选择菜单"
            :flatten-search-results="true"
            :normalizer="normalizer"
          />
        </el-form-item>
        <el-form-item
          label="菜单名称"
          prop="menuTitle"
        >
          <el-input v-model="ruleForm.menuTitle" />
        </el-form-item>
        <el-form-item
          label="菜单类型"
          prop="menuType"
        >
          <el-radio-group
            v-model="ruleForm.menuType"
            :disabled="dialogSetting.title === '修改'"
          >
            <el-radio
              v-for="item in menuTypeOptions"
              :key="item.label"
              :label="item.value"
              @change="menuTypeChange()"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType == 'A'"
          label="请求方式"
          prop="action"
        >
          <el-radio-group v-model="ruleForm.action">
            <el-radio
              v-for="item in methodTypeOptions"
              :key="item.label"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="icon"
        >
          <el-popover
            placement="bottom-start"
            width="383"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect
              ref="iconSelect"
              @selected="selected"
            />
            <el-input
              slot="reference"
              v-model="ruleForm.icon"
              placeholder="点击选择图标"
              readonly
            >
              <svg-icon
                v-if="ruleForm.icon"
                slot="prefix"
                :icon-class="ruleForm.icon"
                class="el-input__icon"
                style="height: 32px;width: 16px;margin-top:4px;"
              />
              <i
                v-else
                slot="prefix"
                class="el-icon-search el-input__icon"
              />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType == 'M' || ruleForm.menuType == 'C'"
          label="路由名称"
          prop="routeName"
        >
          <el-input v-model="ruleForm.routeName" />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType == 'M' || ruleForm.menuType == 'C'"
          label="组件路径"
          prop="componentPath"
        >
          <el-input v-model="ruleForm.componentPath" />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType != 'F'"
          label="路由地址"
          prop="path"
        >
          <el-input v-model="ruleForm.path" />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType == 'C' || ruleForm.menuType == 'F'"
          label="权限标识"
          prop="permission"
        >
          <el-input v-model="ruleForm.permission" />
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType == 'M' || ruleForm.menuType == 'C'"
          label="是否外链"
          prop="isIframe"
        >
          <el-radio-group v-model="ruleForm.isIframe">
            <el-radio
              v-for="item in externalLinkOptins"
              :key="item.label"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="ruleForm.menuType != 'F'"
          label="菜单状态"
          prop="isVisible"
        >
          <el-radio-group v-model="ruleForm.isVisible">
            <el-radio
              v-for="item in showHideOptions"
              :key="item.label"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model="ruleForm.remark"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="closeDialog()"
        >取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="sub('ruleForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { dictItemList } from '@/api/upms/dict-item'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import IconSelect from '@/components/IconSelect'
import {
  create,
  getListTree,
  menuDetailById,
  update,
  deleteMenu
} from '@/api/upms/menu'
export default {
  components: { Treeselect, IconSelect },
  data() {
    return {
      tableData: [],
      deptOptions: [],
      externalLinkOptins: [], // 外链选项
      showHideOptions: [], // 菜单是否隐藏
      menuTypeOptions: [], // 菜单类型
      methodTypeOptions: [], // 请求类型
      dialogSetting: {
        dialogVisible: false,
        title: '',
        width: '40%'
      },
      ruleForm: {
        id: null,
        remark: '',
        menuTitle: '',
        routeName: '',
        icon: '',
        path: '',
        paths: '',
        menuType: 'M',
        action: 'GET',
        permission: '',
        parentId: '0',
        componentPath: '',
        isVisible: '1',
        isIframe: '0'
      },
      resetRuleForm: {
        id: null,
        remark: '',
        menuTitle: '',
        routeName: '',
        icon: '',
        path: '',
        paths: '',
        menuType: 'M',
        action: 'GET',
        permission: '',
        parentId: '0',
        componentPath: '',
        isVisible: '1',
        isIframe: '0'
      },
      rules: {
        parentId: [
          { required: true, message: '请选择上级部门', trigger: 'blur' }
        ],
        menuTitle: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        menuType: [
          {
            required: true,
            message: '请选择菜单类型',
            trigger: 'change'
          }
        ],
        icon: [{ required: true, message: '请选择图标', trigger: 'change' }],
        routeName: [
          { required: true, message: '请输入路由名称', trigger: 'blur' }
        ],
        componentPath: [
          { required: true, message: '请输入组件路径', trigger: 'blur' }
        ],
        path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
        permission: [
          { required: true, message: '请输入权限标识', trigger: 'blur' }
        ],
        isVisible: [
          {
            required: true,
            message: '请选择菜单状态',
            trigger: 'change'
          }
        ],
        isIframe: [
          {
            required: true,
            message: '请选择是否外链',
            trigger: 'change'
          }
        ],
        action: [
          {
            required: true,
            message: '请选择请求方式',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    // 获取部门tree
    this.getListTree()
    // 获取菜单
    this.getMenuList('sys_menu_type')
    // 获取请求类型
    this.getActionTypeList('sys_method_type')
    // 获取菜单是否隐藏
    this.getShowHideOptionsList('sys_show_hide')
    // 是否外链
    this.getExternalLinkOptinsList('sys_external_link')
  },
  methods: {
    getMenuList(dictType) {
      dictItemList({ dictType: dictType }).then(resp => {
        if (resp.code === 0) {
          this.menuTypeOptions = resp.data.list
        }
      })
    },
    getActionTypeList(dictType) {
      dictItemList({ dictType: dictType }).then(resp => {
        if (resp.code === 0) {
          this.methodTypeOptions = resp.data.list
        }
      })
    },
    getShowHideOptionsList(dictType) {
      dictItemList({ dictType: dictType }).then(resp => {
        if (resp.code === 0) {
          this.showHideOptions = resp.data.list
        }
      })
    },
    getExternalLinkOptinsList(dictType) {
      dictItemList({ dictType: dictType }).then(resp => {
        if (resp.code === 0) {
          this.externalLinkOptins = resp.data.list
        }
      })
    },
    openDialog(title) {
      this.dialogSetting.title = title
      this.dialogSetting.dialogVisible = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    beforeCloseDialog(done) {
      this.resetForm('ruleForm')
      this.reset()
      done()
    },
    closeDialog() {
      this.dialogSetting.dialogVisible = false
      this.resetForm('ruleForm')
      this.reset()
    },
    reset() {
      this.ruleForm = this.resetRuleForm
    },
    menuTypeChange() {
      // this.reset()
    },
    // 选择图标
    selected(name) {
      this.ruleForm.icon = name
    },
    getListTree() {
      getListTree().then(resp => {
        if (resp.code === 0) {
          this.tableData = resp.data.list
          this.deptOptions = []
          const dept = { id: '0', menuTitle: '根节点', children: [] }
          dept.children = resp.data.list
          this.deptOptions.push(dept)
        }
      })
    },
    openEtidDialog(title, rowId) {
      // 获取详情
      this.getDetail(rowId)
    },
    getDetail(row) {
      menuDetailById({ id: row.id }).then(resp => {
        if (resp.code === 0) {
          const rowDetail = resp.data.detail
          this.ruleForm.id = rowDetail.id
          this.ruleForm.remark = rowDetail.remark
          this.ruleForm.menuTitle = rowDetail.menuTitle
          this.ruleForm.routeName = rowDetail.routeName
          this.ruleForm.icon = rowDetail.icon
          this.ruleForm.path = rowDetail.path
          this.ruleForm.menuType = rowDetail.menuType
          this.ruleForm.action = rowDetail.action
          this.ruleForm.permission = rowDetail.permission
          this.ruleForm.parentId = rowDetail.parentId
          this.ruleForm.componentPath = rowDetail.componentPath
          this.ruleForm.isVisible = rowDetail.isVisible
          this.ruleForm.isIframe = rowDetail.isIframe
          this.dialogSetting.title = '修改'
          this.dialogSetting.dialogVisible = true
          console.log(rowDetail.menuTitle)
        }
      })
    },
    deleteRow(row) {
      deleteMenu(row.id).then(resp => {
        if (resp.code === 0) {
          this.getListTree()
        }
      })
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.menuTitle,
        children: node.children
      }
    },
    sub(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const obj = {
            parentId: this.ruleForm.parentId,
            menuTitle: this.ruleForm.menuTitle,
            menuType: this.ruleForm.menuType,
            icon: this.ruleForm.icon,
            remark: this.ruleForm.remark
          }

          switch (this.dialogSetting.title) {
            case '新增':
              switch (this.ruleForm.menuType) {
                case 'M': // 目录
                  obj.routeName = this.ruleForm.routeName
                  obj.path = this.ruleForm.path
                  obj.componentPath = this.ruleForm.componentPath
                  obj.isVisible = this.ruleForm.isVisible
                  obj.isIframe = this.ruleForm.isIframe
                  break
                case 'C': // 菜单
                  obj.routeName = this.ruleForm.routeName
                  obj.path = this.ruleForm.path
                  obj.componentPath = this.ruleForm.componentPath
                  obj.isVisible = this.ruleForm.isVisible
                  obj.isIframe = this.ruleForm.isIframe
                  obj.permission = this.ruleForm.permission
                  break
                case 'F': // 按钮
                  obj.permission = this.ruleForm.permission
                  break
                case 'A': // 接口
                  obj.action = this.ruleForm.action
                  obj.path = this.ruleForm.path
                  obj.isVisible = this.ruleForm.isVisible
                  break
              }
              create(obj).then(resp => {
                if (resp.code === 0) {
                  this.notifySuccess('创建成功')
                  this.closeDialog()
                  this.getListTree()
                  this.reset()
                }
              })
              break
            case '修改':
              switch (this.ruleForm.menuType) {
                case 'M': // 目录
                  obj.id = this.ruleForm.id
                  obj.menuTitle = this.ruleForm.menuTitle
                  obj.menuType = this.ruleForm.menuType
                  obj.routeName = this.ruleForm.routeName
                  obj.path = this.ruleForm.path
                  obj.componentPath = this.ruleForm.componentPath
                  obj.isVisible = this.ruleForm.isVisible
                  obj.isIframe = this.ruleForm.isIframe
                  break
                case 'C': // 菜单
                  obj.id = this.ruleForm.id
                  obj.menuTitle = this.ruleForm.menuTitle
                  obj.menuType = this.ruleForm.menuType
                  obj.routeName = this.ruleForm.routeName
                  obj.path = this.ruleForm.path
                  obj.componentPath = this.ruleForm.componentPath
                  obj.isVisible = this.ruleForm.isVisible
                  obj.isIframe = this.ruleForm.isIframe
                  obj.permission = this.ruleForm.permission
                  break
                case 'F': // 按钮
                  obj.id = this.ruleForm.id
                  obj.menuTitle = this.ruleForm.menuTitle
                  obj.menuType = this.ruleForm.menuType
                  obj.permission = this.ruleForm.permission
                  break
                case 'A': // 接口
                  obj.id = this.ruleForm.id
                  obj.menuTitle = this.ruleForm.menuTitle
                  obj.menuType = this.ruleForm.menuType
                  obj.action = this.ruleForm.action
                  obj.path = this.ruleForm.path
                  obj.isVisible = this.ruleForm.isVisible
                  break
              }
              update(obj).then(resp => {
                if (resp.code === 0) {
                  this.notifySuccess('修改成功')
                  this.closeDialog()
                  this.getListTree()
                  this.reset()
                }
              })
              break
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/common.scss";
</style>
